@import '@/styles/init.less';

:global(.ant-form-item-has-error) {
  .universalEditor {
    &.formStatus {
      border-color: @error;
    }
  }
}

@toolbar-height: 3rem;
.universalEditor {
  width: 100%;
  border: 1px solid @border;
  border-radius: @radius;

  &.fullScreen {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    .container {
      height: calc(100vh - @toolbar-height);
    }
  }

  .toolbar {
    height: @toolbar-height;
    padding: 0 @gap;
    border-bottom: 1px solid @border;
    background-color: @body-bg;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      user-select: none;
    }

    .language {
      width: 120px;
    }
  }

  .container {
    width: 100%;
    display: flex;
    position: relative;
    overflow: hidden;
    background-color: @module-bg;

    .editor {
      flex: 1;
      position: relative;
      &.placeholder {
        &::before {
          position: absolute;
          top: 0;
          left: 70px;
          z-index: 1;
          content: attr(placeholder);
          color: @text-disabled;
          font-style: italic;
        }
      }
    }

    .preview {
      position: absolute;
      left: 50%;
      top: 0;
      width: 50%;
      height: 100%;
      padding: 2rem;
      overflow-y: scroll;

      .markdown {
        a {
          color: @primary;
          font-weight: bold;
          margin: 0 0.1em;

          &:hover {
            text-decoration: underline !important;
          }
        }

        img {
          max-width: 80%;
          margin: 0 auto;
          display: block;
          text-align: center;
          border-radius: 2px;
          border: 0.5rem solid @border;
        }

        code {
          padding: 0.3em 0.5em;
          margin: 0 0.5em;
          border-radius: 2px;
          background-color: @border;
        }

        p {
          line-height: 2.2em;
          text-indent: 2em;
          margin-bottom: 1em;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
          margin: 1.5rem 0;
          padding-left: 0;
          line-height: 1.8em;
          font-weight: 700;
          text-indent: 0;
        }

        blockquote {
          margin: 1.2em 0;
          text-indent: 0em;
          background-color: @border;
          border-left: 0.5em solid #aaa;
          padding: 0.5em 1em;
          padding-left: 1.5em;

          p {
            text-indent: 0em;

            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        ul {
          list-style-type: square;
        }

        ul,
        ol {
          > li {
            line-height: 1.8em;
            padding: 0.5em 1em;

            &:hover {
              background-color: @module-bg;
            }

            > ul {
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }

        pre {
          margin-bottom: 1em;

          > code {
            margin: 0;
            padding: 1em;
            line-height: 1.6em;
            background-color: rgba(0, 0, 0, 0.8);
            position: relative;
            display: block;
            color: rgba(255, 255, 255, 0.87);
          }
        }
      }
    }
  }
}
